<template>
  <div class="shop-item clickable" @click="handleClick">
    <img class="shop-img" :src="imgSrc"> <!-- must be 200*200 -->
    <div class="main-content">
      <div class="shop-title">
        <span class="shop-link">
          <slot name="link"></slot>
        </span>
        <div class="shop-price">
          ${{ price }}
        </div>
      </div>
      <div class="shop-body">
        <slot name="body"></slot>
      </div>
      <div class="shop-blank"></div>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent } from "vue"
export default defineComponent({
  name: "ShopItem"
})
</script>
<script setup lang="ts">
import { toRefs } from "vue"
import { useRouter } from 'vue-router'
const props = defineProps<{
  price: string | number,
  imgSrc: string,
  id: number
}>()
const router = useRouter();
let { price, imgSrc, id } = toRefs(props);
async function handleClick() {
  await router.push(`/shops/${id.value}`);
}
</script>


<style scoped lang="less">
@import "../vars";
.shop-img {
  width: 200px;
  height: 200px
}
.shop-item {
  padding: 0.5em;
  display: flex;
  flex-direction: row;
  background-color: #FFF;
  min-width: 50%;
  border-radius: 2em;
  box-shadow: 0.5em 0.5em 1em @gray-100;
  transition: transform 500ms;
  overflow: hidden;
  cursor: pointer;
}
.shop-item:hover {
  box-shadow: none;
  transform: translate(0.5em, 0.5em);
}
.shop-title {
  display: flex;
  flex-direction: row;
  min-width: 100%;
  width: auto;
  @media @phone {
    flex-direction: column;
  }
}
.main-content {
  display: flex;
  flex-direction: column;
}
.shop-link {
  font-size: 2em;
}
.shop-price {
  margin-top: auto;
  margin-bottom: auto;
  margin-left: auto;
  font-size: 1.25em;
  color: @cyan-600;
  @media @phone {
    margin-left: initial;
  }
}
.shop-body {
  word-break: break-all;
}
.shop-blank {
  line-height: 0;
  color: transparent;
  visibility: hidden;
}
.shop-blank:after {
  content: "long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long text";
  word-break: break-all;
}
</style>